<script setup>
defineOptions({
  name: 'home'
})
</script>

<template>
  <div class="bg-gray-100 bg-white">
    <div class="p-6 space-y-6">
      <div class="text-2xl font-bold text-center text-blue-600">Vue3 + Vant4 移动端模板</div>
      <div class="text-base text-gray-700 leading-relaxed">
        本项目是一个基于 <span class="font-bold text-blue-500">Vue3</span> +
        <span class="font-bold text-blue-500">Vant4</span> +
        <span class="font-bold text-blue-500">UnoCSS</span>
        的高效移动端项目模板，集成了主流开发工具和最佳实践，适合快速搭建现代移动端应用。
      </div>
      <div class="bg-white rounded-xl shadow p-4">
        <div class="text-lg font-bold mb-2">技术栈</div>
        <ul class="list-disc pl-5 space-y-1 text-gray-700">
          <li>Vue 3 + Composition API</li>
          <li>Vant 4 移动端组件库</li>
          <li>Pinia 状态管理</li>
          <li>Vue Router 动态路由</li>
          <li>Axios + vue-request 网络请求</li>
          <li>UnoCSS 原子化 CSS</li>
          <li>Vite 极速开发与构建</li>
          <li>自动导入 API/组件</li>
        </ul>
      </div>
      <div class="bg-white rounded-xl shadow p-4">
        <div class="text-lg font-bold mb-2">主要特性</div>
        <ul class="list-disc pl-5 space-y-1 text-gray-700">
          <li>开箱即用的移动端适配</li>
          <li>底部弹窗风格登录/注册/表单</li>
          <li>Tabbar 页面自动安全区适配</li>
          <li>项目主按钮样式统一</li>
          <li>自动路由生成与页面分组</li>
          <li>完善的功能与文档页面</li>
        </ul>
      </div>
      <div class="bg-white rounded-xl shadow p-4">
        <div class="text-lg font-bold mb-2">适用场景</div>
        <ul class="list-disc pl-5 space-y-1 text-gray-700">
          <li>企业/个人移动端项目快速启动</li>
          <li>H5 活动页、管理后台移动端</li>
          <li>需要高度可定制和现代体验的 Vue3 项目</li>
        </ul>
      </div>
      <div class="text-center text-xs text-gray-400 mt-8">开源 · 可商用 · 持续维护</div>
    </div>
  </div>
</template>
<route>
  { 
    path: '/home',
    name: 'home',
    meta: {
      title: '首页',
      keepAlive: true,
      showNavBar: true,
    }
  }
</route>
